<template>
  <el-card>
    <!-- 筛选表单区域 -->
    <el-form label-width="200px;" :inline="true" :model="queryData">
      <el-form-item prop="username">
        <el-input
          size="small"
          placeholder="请输入用户名搜索"
          v-model="queryData.username"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="initData"
          >搜索</el-button
        >
        <el-button size="small" icon="el-icon-refresh" @click="reset"
          >重置</el-button
        >
      </el-form-item>

      <el-button
        style="float: right; padding: 3px, 0; width: 100px"
        type="success"
        plain
        size="small"
        @click="$refs.addUser.showDialog = true"
      >
        <i class="el-icon-edit"></i>
        新增
      </el-button>
    </el-form>

    <el-alert
      :title="`数据一共${counts}条`"
      type="info"
      show-icon
      :closable="false"
    >
    </el-alert>
    <br />

    <!-- 表格 -->
    <el-table :data="list" border>
      <!-- el-table-colum 表示一列，label表示表头名称，prop表示展示的数据字段, type表示列类型，index表示序号列 -->

      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column
        label="邮箱"
        prop="email"
        width="120px"
      ></el-table-column>
      <el-table-column label="联系电话" prop="introduction"></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column
        label="权限组名称"
        prop="permission_group_title"
      ></el-table-column>
      <el-table-column label="角色" prop="role"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button
            circle
            size="small"
            type="primary"
            icon="el-icon-edit"
            @click="edit(row.id)"
          ></el-button>
          <el-button
            @click="delHandler(row.id, row)"
            circle
            size="small"
            type="danger"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryData.page"
      :page-sizes="[10, 4, 6]"
      :page-size="queryData.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="counts"
    >
    </el-pagination>

    <add-user ref="addUser" @updateList="initData"></add-user>
  </el-card>
</template>

<script>
import {
  getUserProfileApi,
  getUserListApi,
  delUserApi,
  getUserInfoApi,
} from "@/api/User";
import AddUser from "./components/add-user.vue";
export default {
  components: { AddUser },
  name: "user",
  data() {
    return {
      list: [],
      queryData: {
        username: "",
        page: 1,
        pagesize: 10,
        disabled: 0,
      },
      counts: 0,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      let { list, counts } = await getUserListApi(this.queryData);
      this.list = list;
      this.counts = counts;
    },

    // 页码变化事件
    handleCurrentChange(val) {
      //val最新页码
      this.queryData.page = val;
      this.initData();
    },
    //每页数量变化事件
    handleSizeChange(val) {
      //val最新每页数量
      this.queryData.pagesize = val;
      this.initData();
    },

    // 重置
    reset() {
      this.queryData.username = "";
      this.initData();
    },

    // 删除
    async delHandler(id) {
      console.log(id);
      await this.$confirm("确认删除吗");
      await delUserApi(id);
      this.$message.success("删除成功");
      // 边缘问题
      if (this.queryData.page !== 1 && this.tableData.length === 1) {
        this.queryData.page--;
      }
      this.initData();
    },

    // 编辑
    async edit(id) {
      let res = await getUserInfoApi(id);
      this.$refs.addUser.formData = res;
      this.$refs.addUser.showDialog = true;
    },
  },
};
</script>

<style>
.add {
  margin-right: 10px;
}
</style>